<template>
    <div>
        <!-- 预售票查询 -->
        <div class="container">
            <!-- 表单 -->
            <el-form :inline="true" :model="formList" class="ticketForm" id="preBookingEnquiry">
                <el-form-item label="售票时间起">
                    <el-date-picker type="date" size="mini" class="minipt"
                                    v-model="formList.startDate" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                    至
                    <el-date-picker type="date" size="mini" class="minipt" v-model="formList.endDate"
                                    value-format="yyyy-MM-dd HH:mm:ss">

                    </el-date-picker>
                </el-form-item>
                <el-form-item label="班次时间起">
                    <el-date-picker type="date" size="mini" class="minipt"
                                    v-model="formList.BusStartDate" value-format="yyyy-MM-dd">

                    </el-date-picker>
                    至
                    <el-date-picker type="date" size="mini" class="minipt" v-model="formList.BusEndDate"
                                    value-format="yyyy-MM-dd">

                    </el-date-picker>
                </el-form-item>
                <el-form-item label="售票员">
                    <el-autocomplete
                            class="inp"
                            size="mini"
                            v-model="formList.create_user"
                            :fetch-suggestions="querySearchSellerList"
                    ></el-autocomplete>
                </el-form-item>
                <el-form-item label="票状态" class="ticketState">
                    <el-select size="mini" v-model="formList.status">
                        <el-option v-for="(item,index) in TicketStatusDef"
                                   :key="index"
                                   :label="item.key"
                                   :value="item.value">

                        </el-option>
                    </el-select>
                </el-form-item>

                <button class="check-btn rf " type="button" @click="reset">
                    <img src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">重置
                </button>
                <button class="check-btn rf" type="button" @click="Querydetail">
                    <img src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">查询
                </button>

            </el-form>

            <!-- 表格 -->
            <el-table style="width: 100%" class="clearfix" :data="tableData" :show-summary="true"
                      :summary-method="getSummaries">
                <el-table-column prop="ticketno" label="票号">
                </el-table-column>
                <el-table-column prop="pricetype" label="票型"></el-table-column>
                <el-table-column prop="statusname" label="状态"></el-table-column>
                <el-table-column prop="price" label="票价"></el-table-column>
                <el-table-column prop="is_enfant" label="携童"></el-table-column>
                <el-table-column prop="bus_date" label="班次日期"></el-table-column>
                <el-table-column prop="bus_time" label="时间"></el-table-column>
                <el-table-column prop="stname" label="目的地"></el-table-column>
                <el-table-column prop="busid" label="班次号"></el-table-column>
                <el-table-column prop="seatno" label="座号"></el-table-column>
                <el-table-column prop="seller_name" label="售票员"></el-table-column>
                <el-table-column prop="create_time" label="操作时间"></el-table-column>
                <el-table-column prop="barcode" label="条码"></el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <el-pagination
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    import qs from "qs";

    export default {
        data() {
            return {
                formList: {
                    startDate: "",
                    endDate: "",
                    status: "",
                    create_user: "",
                    BusStartDate: "",
                    BusEndDate: "",

                },
                TicketStatusDef: [],

                create_userid: "",

                TicketSellerList: [],

                tableData: [],
            };
        },
        methods: {


            //售票员搜索框建议数据
            querySearchSellerList(queryString, cb) {
                var restaurants = this.TicketSellerList;
                var results = queryString ? restaurants.filter(this.SellercreateFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            SellercreateFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.key, restaurant.value);
                    console.log(restaurant.key);
                };
            },


            //加载票状态列表
            getStatusDef() {
                this.$http.post("/tks/common/getStatusDef")
                    .then(data => {

                            this.TicketStatusDef = data.data
                        }
                    )
            },

            // 加载系统用户列表数据
            loadUserList() {
                this.$http.post("/sys/user/listWithSpell")
                    .then(data => {
                        for (var item of data.data) {
                            this.TicketSellerList.push({
                                value: item.name,
                                id: item.id
                            });
                        }
                        // console.log(this.TicketSellerList);

                    });
            },


            //重置按钮
            reset() {
                this.formList = {
                    startDate: "",
                    endDate: "",
                    status: "",
                    seller_no: "",
                    BusStartDate: "",
                    BusEndDate: "",

                }
            },

            //查询按钮
            Querydetail() {
                this.tableData = [];
                var that = this;
                var params = '[{"field":"tks_ticket.create_time","op":"dge","value":"' + that.formList.startDate + '"},' +
                    '{"field":"tks_ticket.create_time","op":"dle","value":"' + that.formList.endDate + '"},' +
                    '{"field":"sum.seller_id","op":"eq","value":"' + this.create_userid + '"},' +
                    // '{"field":"tks_ticket.bus_date","op":"dge","value":"' + that.formList.BusStartDate + '"},' +
                    // '{"field":"tks_ticket.bus_date","op":"dle","value":"' + that.formList.BusEndDate + '"},' +
                    '{"field":"tks_ticket.status","op":"eq","value":"' + that.formList.status + '"}]';
                this.$http.post("/query/presell/detail/list", qs.stringify({

                        filterRules: params,
                        'page': '1',
                        'rows': '50',
                        'sort': 'pricetype',
                        'order': 'desc',
                    })
                ).then(data => {
                    console.log(data);
                    for (var a of  data.data.list) {
                        that.tableData.push({
                            ticketno: a.ticketno,
                            pricetype: a.pricetype,
                            statusname: a.statusname,
                            price: a.price,
                            is_enfant: a.is_enfant,
                            bus_date: a.bus_date,
                            bus_time: a.bus_time,
                            stname: a.stname,
                            busid: a.busid,
                            seatno: a.seatno,
                            seller_name: a.seller_name,
                            create_time: a.create_time,
                            barcode: a.barcode,
                        })

                    }

                })
            },

            //合计函数
            getSummaries(param) {
                const {columns, data} = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '合计';
                        return;
                    }
                    if (index === 8) {
                        sums[index] = '';
                        return;
                    }
                    if (index === 9) {
                        sums[index] = '';
                        return;
                    }
                    if (index === 12) {
                        sums[index] = '';
                        return;
                    }
                    if (index === 1) {
                        sums[index] = this.tableData.length;
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += '';
                    } else {
                        sums[index] = '';
                    }
                });

                return sums;
            },
        },
        watch: {

            //监听售票员id
            "formList.create_user": {
                handler(curVal, oldVal) {
                    console.log(curVal, oldVal);
                    if (this.formList.create_user == "") {
                        this.create_userid = "";
                    } else {
                        for (var item of this.TicketSellerList) {
                            if (this.formList.create_user == item.value) {
                                this.create_userid = item.id;
                                break;
                            } else {
                                this.create_userid = "";
                            }
                        }
                        console.log(this.create_userid)
                    }
                },
                deep: true
            },


        },

        mounted() {
            this.getStatusDef();
            this.loadUserList();
        }
    }
</script>
<style scoped src="../../assets/css/check/preBookingEnquiry.css">
</style>
